<template>
  <div class="main">
    <el-breadcrumb separator="/">
      <el-breadcrumb-item :to="{ path: '/welcome' }">首页</el-breadcrumb-item>
      <el-breadcrumb-item>{{oneLevelMenu.authName}}</el-breadcrumb-item>
      <el-breadcrumb-item>{{twoLevelMenu.authName}}</el-breadcrumb-item>
    </el-breadcrumb>
  </div>
</template>

<script>
export default {
  name: 'Breadcrumb',
  data: () => {
    return {
      oneLevelMenu: {},
      twoLevelMenu: {}
    }
  },
  created () {
    this.setBreadcrumb()
  },

  methods: {
    setBreadcrumb () {
      const path = this.$route.path.substring(1)
      const menus = JSON.parse(window.sessionStorage.getItem('menus'))
      this.oneLevelMenu = menus.find(menu => {
        let flag = false
        menu.children.find(child => {
          if (child.path === path) flag = true
        })
        if (flag) return menu
      })
      this.twoLevelMenu = this.oneLevelMenu.children.find(menu => {
        return menu.path === path
      })
    }
  }
}
</script>
<style lang="less" scoped>
  @import "./index";
</style>
